<template>
  <div class="business-decision-game">
    <div class="game-header">
      <div class="header-content">
        <el-button icon="ArrowLeft" @click="goBack">返回游戏中心</el-button>
        <div class="game-title">
          <h1>🎲 商业决策模拟器</h1>
          <p>在复杂商业环境中做出最优决策</p>
        </div>
        <div class="game-stats">
          <el-tag type="success" size="large">回合 {{ currentRound }}/{{ totalRounds }}</el-tag>
          <el-tag type="warning" size="large">公司资金: ${{ companyFunds }}M</el-tag>
          <el-tag type="danger" size="large">市场份额: {{ marketShare }}%</el-tag>
        </div>
      </div>
    </div>

    <div class="game-container">
      <!-- 开始界面 -->
      <div v-if="gameStatus === 'ready'" class="game-start">
        <div class="start-card">
          <el-icon class="start-icon"><TrendCharts /></el-icon>
          <h2>商业决策模拟器</h2>
          <p>你将担任一家科技公司的CEO，面对各种商业决策挑战</p>
          <div class="game-rules">
            <h3>游戏规则</h3>
            <div class="rules-grid">
              <div class="rule-item">
                <el-icon><Money /></el-icon>
                <h4>资金管理</h4>
                <p>合理分配有限的公司资金</p>
              </div>
              <div class="rule-item">
                <el-icon><TrendCharts /></el-icon>
                <h4>市场竞争</h4>
                <p>在激烈竞争中保持优势</p>
              </div>
              <div class="rule-item">
                <el-icon><UserFilled /></el-icon>
                <h4>团队发展</h4>
                <p>投资人才和团队建设</p>
              </div>
              <div class="rule-item">
                <el-icon><Star /></el-icon>
                <h4>产品创新</h4>
                <p>持续推出创新产品</p>
              </div>
            </div>
            <ul>
              <li>🎯 每个回合面对3-4个重要决策</li>
              <li>💰 每个决策都会影响资金、市场份额、员工满意度等</li>
              <li>📊 需要平衡短期利益和长期发展</li>
              <li>🏆 目标：10个回合后成为市场领导者</li>
            </ul>
          </div>
          <div class="difficulty-selection">
            <h3>选择难度</h3>
            <el-radio-group v-model="selectedDifficulty" size="large">
              <el-radio-button label="easy">简单</el-radio-button>
              <el-radio-button label="medium">中等</el-radio-button>
              <el-radio-button label="hard">困难</el-radio-button>
            </el-radio-group>
          </div>
          <el-button type="primary" size="large" @click="startGame">
            <el-icon><CaretRight /></el-icon>
            开始模拟
          </el-button>
        </div>
      </div>

      <!-- 游戏进行中 -->
      <div v-if="gameStatus === 'playing'" class="game-playing">
        <el-row :gutter="20">
          <!-- 左侧：公司状态面板 -->
          <el-col :span="8">
            <el-card class="company-status">
              <template #header>
                <div class="card-header">
                  <h3>🏢 公司状态</h3>
                  <el-tag>{{ companyName }}</el-tag>
                </div>
              </template>

              <div class="status-section">
                <h4>财务状况</h4>
                <div class="status-item">
                  <span>公司资金</span>
                  <div class="value-bar">
                    <span class="value">${{ companyFunds }}M</span>
                    <el-progress 
                      :percentage="Math.min(100, (companyFunds / 500) * 100)" 
                      :color="getProgressColor(companyFunds, 500)"
                      :show-text="false"
                    />
                  </div>
                </div>
                <div class="status-item">
                  <span>季度收入</span>
                  <div class="value-bar">
                    <span class="value">${{ quarterlyRevenue }}M</span>
                    <el-progress 
                      :percentage="Math.min(100, (quarterlyRevenue / 200) * 100)" 
                      color="#67c23a"
                      :show-text="false"
                    />
                  </div>
                </div>
              </div>

              <div class="status-section">
                <h4>市场表现</h4>
                <div class="status-item">
                  <span>市场份额</span>
                  <div class="value-bar">
                    <span class="value">{{ marketShare }}%</span>
                    <el-progress 
                      :percentage="marketShare" 
                      :color="getProgressColor(marketShare, 100)"
                      :show-text="false"
                    />
                  </div>
                </div>
                <div class="status-item">
                  <span>品牌声誉</span>
                  <div class="value-bar">
                    <span class="value">{{ brandReputation }}/100</span>
                    <el-progress 
                      :percentage="brandReputation" 
                      :color="getProgressColor(brandReputation, 100)"
                      :show-text="false"
                    />
                  </div>
                </div>
              </div>

              <div class="status-section">
                <h4>团队与运营</h4>
                <div class="status-item">
                  <span>员工人数</span>
                  <div class="value-bar">
                    <span class="value">{{ employeeCount }}人</span>
                  </div>
                </div>
                <div class="status-item">
                  <span>员工满意度</span>
                  <div class="value-bar">
                    <span class="value">{{ employeeSatisfaction }}%</span>
                    <el-progress 
                      :percentage="employeeSatisfaction" 
                      :color="getProgressColor(employeeSatisfaction, 100)"
                      :show-text="false"
                    />
                  </div>
                </div>
                <div class="status-item">
                  <span>创新指数</span>
                  <div class="value-bar">
                    <span class="value">{{ innovationIndex }}/100</span>
                    <el-progress 
                      :percentage="innovationIndex" 
                      color="#409eff"
                      :show-text="false"
                    />
                  </div>
                </div>
              </div>

              <div class="kpi-summary">
                <div class="kpi-item">
                  <el-icon><Trophy /></el-icon>
                  <div>
                    <div class="kpi-label">综合评分</div>
                    <div class="kpi-value">{{ overallScore }}</div>
                  </div>
                </div>
                <div class="kpi-item">
                  <el-icon><Aim /></el-icon>
                  <div>
                    <div class="kpi-label">战略目标</div>
                    <div class="kpi-value">{{ Math.round(goalProgress) }}%</div>
                  </div>
                </div>
              </div>
            </el-card>

            <el-card class="history-panel">
              <h3>📜 决策历史</h3>
              <el-timeline>
                <el-timeline-item 
                  v-for="(history, index) in decisionHistory" 
                  :key="index"
                  :timestamp="`回合 ${history.round}`"
                  :color="history.impact > 0 ? '#67c23a' : '#f56c6c'"
                >
                  <div class="history-item">
                    <strong>{{ history.decision }}</strong>
                    <p>{{ history.result }}</p>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </el-card>
          </el-col>

          <!-- 右侧：决策区域 -->
          <el-col :span="16">
            <el-card class="decision-card">
              <template #header>
                <div class="decision-header">
                  <h3>第 {{ currentRound }} 回合 - {{ currentScenario.title }}</h3>
                  <el-tag type="info">{{ currentScenario.category }}</el-tag>
                </div>
              </template>

              <div class="scenario-content">
                <div class="scenario-description">
                  <el-alert
                    :title="currentScenario.situation"
                    type="info"
                    :closable="false"
                    show-icon
                  />
                </div>

                <div class="scenario-context">
                  <h4>背景信息</h4>
                  <div class="context-grid">
                    <div 
                      v-for="(info, key) in currentScenario.context" 
                      :key="key"
                      class="context-item"
                    >
                      <strong>{{ key }}:</strong>
                      <span>{{ info }}</span>
                    </div>
                  </div>
                </div>

                <div class="decision-options">
                  <h4>请做出你的决策</h4>
                  <div class="options-list">
                    <div 
                      v-for="option in currentScenario.options" 
                      :key="option.id"
                      class="option-card"
                      :class="{ selected: selectedOption === option.id }"
                      @click="selectOption(option.id)"
                    >
                      <div class="option-header">
                        <el-radio :label="option.id" v-model="selectedOption">
                          <strong>{{ option.title }}</strong>
                        </el-radio>
                        <el-tag size="small" :type="option.risk">{{ option.riskLabel }}</el-tag>
                      </div>
                      <div class="option-description">
                        {{ option.description }}
                      </div>
                      <div class="option-impacts">
                        <div class="impact-item" v-for="impact in option.impacts" :key="impact.type">
                          <el-icon :class="impact.value > 0 ? 'positive' : 'negative'">
                            <component :is="getImpactIcon(impact.type)" />
                          </el-icon>
                          <span>{{ impact.label }}: </span>
                          <span :class="impact.value > 0 ? 'positive' : 'negative'">
                            {{ impact.value > 0 ? '+' : '' }}{{ impact.value }}{{ impact.unit }}
                          </span>
                        </div>
                      </div>
                      <div class="option-cost" v-if="option.cost">
                        <el-icon><Wallet /></el-icon>
                        <span>投资成本: ${{ option.cost }}M</span>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="decision-actions">
                  <el-button 
                    type="primary" 
                    size="large"
                    :disabled="!selectedOption"
                    @click="confirmDecision"
                  >
                    确认决策
                  </el-button>
                  <el-button @click="showAnalysis">智能分析</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 游戏结束 -->
      <div v-if="gameStatus === 'finished'" class="game-finish">
        <div class="finish-card">
          <el-icon class="finish-icon" :class="finalRank"><Trophy /></el-icon>
          <h2>模拟结束！</h2>
          <div class="final-rank" :class="finalRank">{{ rankTitle }}</div>
          <p class="rank-description">{{ rankDescription }}</p>

          <div class="final-stats">
            <div class="stat-card">
              <el-icon><Money /></el-icon>
              <div class="stat-content">
                <div class="stat-label">最终资金</div>
                <div class="stat-value">${{ companyFunds }}M</div>
                <div class="stat-change" :class="companyFunds >= 100 ? 'positive' : 'negative'">
                  {{ companyFunds >= 100 ? '↑' : '↓' }} {{ Math.abs(companyFunds - 100) }}M
                </div>
              </div>
            </div>
            <div class="stat-card">
              <el-icon><TrendCharts /></el-icon>
              <div class="stat-content">
                <div class="stat-label">市场份额</div>
                <div class="stat-value">{{ marketShare }}%</div>
                <div class="stat-change" :class="marketShare >= 15 ? 'positive' : 'negative'">
                  {{ marketShare >= 15 ? '↑' : '↓' }} {{ Math.abs(marketShare - 15) }}%
                </div>
              </div>
            </div>
            <div class="stat-card">
              <el-icon><UserFilled /></el-icon>
              <div class="stat-content">
                <div class="stat-label">员工人数</div>
                <div class="stat-value">{{ employeeCount }}人</div>
              </div>
            </div>
            <div class="stat-card">
              <el-icon><Star /></el-icon>
              <div class="stat-content">
                <div class="stat-label">综合评分</div>
                <div class="stat-value highlight">{{ overallScore }}</div>
              </div>
            </div>
          </div>

          <div class="performance-analysis">
            <h3>📊 经营表现分析</h3>
            <div class="analysis-grid">
              <div class="analysis-item">
                <h4>财务健康度</h4>
                <el-progress 
                  :percentage="Math.min(100, (companyFunds / 500) * 100)" 
                  :color="getProgressColor(companyFunds, 500)"
                />
                <p>{{ getFinancialAnalysis() }}</p>
              </div>
              <div class="analysis-item">
                <h4>市场竞争力</h4>
                <el-progress 
                  :percentage="marketShare" 
                  :color="getProgressColor(marketShare, 100)"
                />
                <p>{{ getMarketAnalysis() }}</p>
              </div>
              <div class="analysis-item">
                <h4>团队建设</h4>
                <el-progress 
                  :percentage="employeeSatisfaction" 
                  :color="getProgressColor(employeeSatisfaction, 100)"
                />
                <p>{{ getTeamAnalysis() }}</p>
              </div>
              <div class="analysis-item">
                <h4>创新能力</h4>
                <el-progress 
                  :percentage="innovationIndex" 
                  color="#409eff"
                />
                <p>{{ getInnovationAnalysis() }}</p>
              </div>
            </div>
          </div>

          <div class="key-decisions">
            <h3>🎯 关键决策回顾</h3>
            <div class="decision-review">
              <div 
                v-for="(decision, index) in decisionHistory.slice(-5)" 
                :key="index"
                class="review-item"
              >
                <div class="review-header">
                  <span class="review-round">回合{{ decision.round }}</span>
                  <span class="review-decision">{{ decision.decision }}</span>
                  <el-tag :type="decision.impact > 0 ? 'success' : 'danger'" size="small">
                    {{ decision.impact > 0 ? '正面' : '负面' }}
                  </el-tag>
                </div>
                <p>{{ decision.result }}</p>
              </div>
            </div>
          </div>

          <div class="action-buttons">
            <el-button type="primary" size="large" @click="restartGame">再玩一次</el-button>
            <el-button size="large" @click="goBack">返回游戏中心</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  ArrowLeft, TrendCharts, Money, UserFilled, Star, CaretRight,
  Trophy, Aim, Wallet
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏状态
const gameStatus = ref('ready')
const selectedDifficulty = ref('medium')
const currentRound = ref(1)
const totalRounds = ref(10)
const companyName = ref('创新科技公司')

// 公司指标
const companyFunds = ref(100)
const quarterlyRevenue = ref(50)
const marketShare = ref(15)
const brandReputation = ref(60)
const employeeCount = ref(50)
const employeeSatisfaction = ref(70)
const innovationIndex = ref(65)

// 决策相关
const selectedOption = ref(null)
const decisionHistory = ref([])

// 场景数据
const scenarios = [
  {
    round: 1,
    title: '产品研发投资决策',
    category: '战略规划',
    situation: '公司需要决定是否投资新产品研发项目，这将影响未来的市场竞争力',
    context: {
      '当前产品': '市场表现良好，但面临竞争压力',
      '竞争对手': '已开始布局新技术领域',
      '研发周期': '预计需要2个季度',
      '市场趋势': '新技术需求快速增长'
    },
    options: [
      {
        id: 1,
        title: '大力投资研发',
        description: '投入大量资金进行新产品研发，抢占市场先机',
        risk: 'danger',
        riskLabel: '高风险',
        cost: 30,
        impacts: [
          { type: 'money', label: '资金', value: -30, unit: 'M' },
          { type: 'innovation', label: '创新指数', value: 20, unit: '' },
          { type: 'market', label: '市场份额', value: 5, unit: '%' }
        ]
      },
      {
        id: 2,
        title: '适度投资研发',
        description: '保持稳健投资策略，平衡风险与收益',
        risk: 'warning',
        riskLabel: '中风险',
        cost: 15,
        impacts: [
          { type: 'money', label: '资金', value: -15, unit: 'M' },
          { type: 'innovation', label: '创新指数', value: 10, unit: '' },
          { type: 'market', label: '市场份额', value: 2, unit: '%' }
        ]
      },
      {
        id: 3,
        title: '专注现有产品',
        description: '继续优化现有产品，降低风险',
        risk: 'success',
        riskLabel: '低风险',
        cost: 5,
        impacts: [
          { type: 'money', label: '资金', value: -5, unit: 'M' },
          { type: 'innovation', label: '创新指数', value: -5, unit: '' },
          { type: 'brand', label: '品牌声誉', value: 5, unit: '' }
        ]
      }
    ]
  },
  {
    round: 2,
    title: '人才招聘策略',
    category: '人力资源',
    situation: '公司业务快速增长，需要扩充团队，但人才市场竞争激烈',
    context: {
      '当前团队': '50人，整体能力较强',
      '业务需求': '急需20名技术和销售人员',
      '市场薪资': '行业平均水平上涨15%',
      '竞争压力': '多家公司在抢夺人才'
    },
    options: [
      {
        id: 1,
        title: '高薪挖掘顶尖人才',
        description: '提供行业顶级薪资，快速组建精英团队',
        risk: 'danger',
        riskLabel: '高成本',
        cost: 20,
        impacts: [
          { type: 'money', label: '资金', value: -20, unit: 'M' },
          { type: 'employee', label: '员工人数', value: 20, unit: '人' },
          { type: 'innovation', label: '创新指数', value: 15, unit: '' },
          { type: 'satisfaction', label: '员工满意度', value: 10, unit: '%' }
        ]
      },
      {
        id: 2,
        title: '校园招聘培养',
        description: '招聘应届生进行培养，长期投资',
        risk: 'warning',
        riskLabel: '见效慢',
        cost: 8,
        impacts: [
          { type: 'money', label: '资金', value: -8, unit: 'M' },
          { type: 'employee', label: '员工人数', value: 25, unit: '人' },
          { type: 'innovation', label: '创新指数', value: 5, unit: '' }
        ]
      },
      {
        id: 3,
        title: '精简团队提效',
        description: '优化现有团队，提升人均效率',
        risk: 'success',
        riskLabel: '稳健',
        cost: 3,
        impacts: [
          { type: 'money', label: '资金', value: -3, unit: 'M' },
          { type: 'satisfaction', label: '员工满意度', value: -5, unit: '%' },
          { type: 'innovation', label: '创新指数', value: 8, unit: '' }
        ]
      }
    ]
  },
  {
    round: 3,
    title: '市场营销策略',
    category: '市场推广',
    situation: '竞争对手发起了大规模营销活动，需要决定如何应对',
    context: {
      '竞争态势': '主要竞争对手投入5000万营销',
      '当前品牌': '在目标市场知名度中等',
      '营销渠道': '线上线下多种渠道可选',
      '预算限制': '营销预算有限'
    },
    options: [
      {
        id: 1,
        title: '大规模营销反击',
        description: '投入大量资金进行品牌营销，与竞争对手正面竞争',
        risk: 'danger',
        riskLabel: '高投入',
        cost: 35,
        impacts: [
          { type: 'money', label: '资金', value: -35, unit: 'M' },
          { type: 'market', label: '市场份额', value: 8, unit: '%' },
          { type: 'brand', label: '品牌声誉', value: 15, unit: '' }
        ]
      },
      {
        id: 2,
        title: '精准营销策略',
        description: '聚焦核心客户群体，进行精准营销',
        risk: 'warning',
        riskLabel: '中投入',
        cost: 15,
        impacts: [
          { type: 'money', label: '资金', value: -15, unit: 'M' },
          { type: 'market', label: '市场份额', value: 4, unit: '%' },
          { type: 'brand', label: '品牌声誉', value: 8, unit: '' }
        ]
      },
      {
        id: 3,
        title: '口碑营销',
        description: '依靠产品质量和用户口碑自然传播',
        risk: 'success',
        riskLabel: '低成本',
        cost: 5,
        impacts: [
          { type: 'money', label: '资金', value: -5, unit: 'M' },
          { type: 'market', label: '市场份额', value: 1, unit: '%' },
          { type: 'brand', label: '品牌声誉', value: 10, unit: '' }
        ]
      }
    ]
  }
]

const currentScenario = ref(scenarios[0])

const overallScore = computed(() => {
  return Math.round(
    companyFunds.value * 0.3 +
    marketShare.value * 2 +
    brandReputation.value * 0.5 +
    employeeSatisfaction.value * 0.3 +
    innovationIndex.value * 0.4
  )
})

const goalProgress = computed(() => {
  return ((marketShare.value / 30) * 100)
})

const finalRank = computed(() => {
  if (overallScore.value >= 300) return 'legendary'
  if (overallScore.value >= 250) return 'master'
  if (overallScore.value >= 200) return 'expert'
  if (overallScore.value >= 150) return 'intermediate'
  return 'beginner'
})

const rankTitle = computed(() => {
  const ranks = {
    legendary: '传奇CEO',
    master: '大师级CEO',
    expert: '专家级CEO',
    intermediate: '中级CEO',
    beginner: '新手CEO'
  }
  return ranks[finalRank.value]
})

const rankDescription = computed(() => {
  const descriptions = {
    legendary: '卓越！你展现了非凡的商业洞察力和决策能力！',
    master: '优秀！你的决策能力已达到行业顶尖水平！',
    expert: '良好！你掌握了大部分商业决策技巧！',
    intermediate: '不错！继续学习和实践会更好！',
    beginner: '需要提升！多学习商业管理知识！'
  }
  return descriptions[finalRank.value]
})

const getProgressColor = (value, max) => {
  const percentage = (value / max) * 100
  if (percentage >= 80) return '#67c23a'
  if (percentage >= 50) return '#e6a23c'
  return '#f56c6c'
}

const getImpactIcon = (type) => {
  const icons = {
    money: 'Money',
    market: 'TrendCharts',
    innovation: 'Star',
    employee: 'UserFilled',
    satisfaction: 'Star',
    brand: 'Trophy'
  }
  return icons[type] || 'Star'
}

const startGame = () => {
  gameStatus.value = 'playing'
  currentRound.value = 1
  resetCompanyStats()
  currentScenario.value = scenarios[0]
  ElMessage.success('游戏开始！祝你成为优秀的CEO！')
}

const resetCompanyStats = () => {
  companyFunds.value = selectedDifficulty.value === 'easy' ? 150 : 
                       selectedDifficulty.value === 'medium' ? 100 : 80
  quarterlyRevenue.value = 50
  marketShare.value = 15
  brandReputation.value = 60
  employeeCount.value = 50
  employeeSatisfaction.value = 70
  innovationIndex.value = 65
  decisionHistory.value = []
  selectedOption.value = null
}

const selectOption = (optionId) => {
  selectedOption.value = optionId
}

const confirmDecision = () => {
  const option = currentScenario.value.options.find(opt => opt.id === selectedOption.value)
  if (!option) return

  // 应用决策影响
  option.impacts.forEach(impact => {
    switch (impact.type) {
      case 'money':
        companyFunds.value = Math.max(0, companyFunds.value + impact.value)
        break
      case 'market':
        marketShare.value = Math.max(0, Math.min(100, marketShare.value + impact.value))
        break
      case 'innovation':
        innovationIndex.value = Math.max(0, Math.min(100, innovationIndex.value + impact.value))
        break
      case 'employee':
        employeeCount.value = Math.max(10, employeeCount.value + impact.value)
        break
      case 'satisfaction':
        employeeSatisfaction.value = Math.max(0, Math.min(100, employeeSatisfaction.value + impact.value))
        break
      case 'brand':
        brandReputation.value = Math.max(0, Math.min(100, brandReputation.value + impact.value))
        break
    }
  })

  // 记录决策历史
  decisionHistory.value.push({
    round: currentRound.value,
    decision: option.title,
    result: option.description,
    impact: option.impacts.reduce((sum, imp) => sum + imp.value, 0)
  })

  // 生成季度收入
  quarterlyRevenue.value = Math.round(
    50 + marketShare.value * 2 + brandReputation.value * 0.5 + Math.random() * 20
  )

  ElMessage.success(`决策已执行：${option.title}`)

  // 下一回合或结束游戏
  setTimeout(() => {
    if (currentRound.value < totalRounds.value) {
      currentRound.value++
      const scenarioIndex = Math.min(currentRound.value - 1, scenarios.length - 1)
      currentScenario.value = scenarios[scenarioIndex % scenarios.length]
      selectedOption.value = null
    } else {
      gameStatus.value = 'finished'
      ElMessage.success('模拟结束！查看你的经营成果！')
    }
  }, 1500)
}

const showAnalysis = () => {
  ElMessageBox.alert(
    '建议：平衡短期收益和长期发展，关注市场份额和品牌建设，同时保持财务健康。',
    '智能分析',
    { type: 'info' }
  )
}

const getFinancialAnalysis = () => {
  if (companyFunds.value >= 200) return '财务状况优秀，资金充裕'
  if (companyFunds.value >= 100) return '财务状况良好，运营稳健'
  if (companyFunds.value >= 50) return '财务压力较大，需要控制成本'
  return '财务状况危急，需要紧急改善'
}

const getMarketAnalysis = () => {
  if (marketShare.value >= 30) return '市场领导者，竞争优势明显'
  if (marketShare.value >= 20) return '市场挑战者，有一定竞争力'
  if (marketShare.value >= 10) return '市场追随者，需要加强竞争'
  return '市场份额较低，竞争压力大'
}

const getTeamAnalysis = () => {
  if (employeeSatisfaction.value >= 80) return '团队士气高昂，凝聚力强'
  if (employeeSatisfaction.value >= 60) return '团队状态良好，稳定发展'
  if (employeeSatisfaction.value >= 40) return '团队满意度一般，需要改善'
  return '团队士气低落，人才流失风险高'
}

const getInnovationAnalysis = () => {
  if (innovationIndex.value >= 80) return '创新能力突出，引领行业'
  if (innovationIndex.value >= 60) return '创新能力良好，保持竞争力'
  if (innovationIndex.value >= 40) return '创新能力一般，需要加强'
  return '创新不足，面临被市场淘汰风险'
}

const restartGame = () => {
  gameStatus.value = 'ready'
  currentRound.value = 1
}

const goBack = () => {
  router.push('/learning/games')
}
</script>

<style scoped>
.business-decision-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.game-header {
  background: white;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-title {
  flex: 1;
  text-align: center;
}

.game-title h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
}

.game-title p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.game-stats {
  display: flex;
  gap: 10px;
}

.game-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
}

/* 开始界面 */
.game-start {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.start-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 900px;
  text-align: center;
}

.start-icon {
  font-size: 80px;
  color: #409eff;
  margin-bottom: 20px;
}

.start-card h2 {
  margin: 0 0 15px 0;
  font-size: 32px;
}

.game-rules {
  text-align: left;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

.game-rules h3 {
  margin: 0 0 15px 0;
  text-align: center;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.rule-item {
  background: white;
  padding: 15px;
  border-radius: 8px;
  text-align: center;
}

.rule-item .el-icon {
  font-size: 32px;
  color: #409eff;
  margin-bottom: 8px;
}

.rule-item h4 {
  margin: 0 0 5px 0;
  font-size: 14px;
}

.rule-item p {
  margin: 0;
  font-size: 12px;
  color: #606266;
}

.game-rules ul {
  margin: 0;
  padding-left: 20px;
}

.game-rules li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.difficulty-selection {
  margin: 20px 0;
}

.difficulty-selection h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
}

/* 游戏进行中 */
.company-status .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.company-status .card-header h3 {
  margin: 0;
  font-size: 16px;
}

.status-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebeef5;
}

.status-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.status-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #409eff;
}

.status-item {
  margin-bottom: 12px;
}

.status-item:last-child {
  margin-bottom: 0;
}

.status-item > span {
  display: block;
  font-size: 13px;
  color: #606266;
  margin-bottom: 5px;
}

.value-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.value-bar .value {
  min-width: 80px;
  font-weight: bold;
  color: #303133;
  font-size: 14px;
}

.kpi-summary {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.kpi-item {
  flex: 1;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kpi-item .el-icon {
  font-size: 24px;
}

.kpi-label {
  font-size: 12px;
  opacity: 0.9;
}

.kpi-value {
  font-size: 18px;
  font-weight: bold;
}

.history-panel {
  margin-top: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.history-panel h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
}

.history-item strong {
  color: #409eff;
}

.history-item p {
  margin: 5px 0 0 0;
  font-size: 13px;
  color: #606266;
}

.decision-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.decision-header h3 {
  margin: 0;
  font-size: 18px;
}

.scenario-content {
  padding: 20px 0;
}

.scenario-description {
  margin-bottom: 20px;
}

.scenario-context {
  background: #f5f7fa;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.scenario-context h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
}

.context-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.context-item {
  font-size: 13px;
  line-height: 1.6;
}

.context-item strong {
  color: #409eff;
  margin-right: 5px;
}

.decision-options h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.option-card {
  background: #f5f7fa;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-card:hover {
  background: #ecf5ff;
  border-color: #409eff;
}

.option-card.selected {
  background: #ecf5ff;
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.option-description {
  color: #606266;
  font-size: 13px;
  margin-bottom: 12px;
  padding-left: 24px;
}

.option-impacts {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding-left: 24px;
  margin-bottom: 10px;
}

.impact-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}

.impact-item .el-icon {
  font-size: 16px;
}

.impact-item .positive {
  color: #67c23a;
}

.impact-item .negative {
  color: #f56c6c;
}

.option-cost {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 24px;
  color: #e6a23c;
  font-size: 13px;
  font-weight: bold;
}

.decision-actions {
  text-align: center;
  margin-top: 20px;
}

/* 游戏结束 */
.game-finish {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.finish-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 1000px;
  text-align: center;
}

.finish-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.finish-icon.legendary {
  color: #f59e0b;
  animation: bounce 1s infinite;
}

.finish-icon.master {
  color: #3b82f6;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.finish-card h2 {
  margin: 0 0 20px 0;
  font-size: 32px;
}

.final-rank {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 15px;
}

.final-rank.legendary {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b4513;
}

.final-rank.master {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.final-rank.expert {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  color: white;
}

.rank-description {
  margin: 0 0 30px 0;
  font-size: 16px;
  color: #606266;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.stat-card .el-icon {
  font-size: 32px;
}

.stat-content {
  text-align: center;
  width: 100%;
}

.stat-label {
  font-size: 13px;
  margin-bottom: 5px;
  opacity: 0.9;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-value.highlight {
  font-size: 32px;
}

.stat-change {
  font-size: 12px;
}

.stat-change.positive {
  color: #a8ff78;
}

.stat-change.negative {
  color: #ff6b6b;
}

.performance-analysis {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  text-align: left;
}

.performance-analysis h3 {
  margin: 0 0 20px 0;
  text-align: center;
}

.analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.analysis-item h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #409eff;
}

.analysis-item p {
  margin: 10px 0 0 0;
  font-size: 13px;
  color: #606266;
}

.key-decisions {
  background: #f5f7fa;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 30px;
  text-align: left;
}

.key-decisions h3 {
  margin: 0 0 20px 0;
  text-align: center;
}

.decision-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-item {
  background: white;
  padding: 12px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.review-round {
  color: #909399;
  font-size: 12px;
}

.review-decision {
  font-weight: bold;
  color: #303133;
  flex: 1;
}

.review-item p {
  margin: 0;
  font-size: 13px;
  color: #606266;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

@media (max-width: 1200px) {
  .rules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .final-stats,
  .analysis-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

